<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>processed qingdaoshi Table</title>
    <style>        table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }
    .highlight {
        color: green;
    }
    </style>
</head>

<body>

<h2>Processed Data</h2>
<table>
    <thead>
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    </thead>
    <tbody id="data-body">
    <!-- JavaScript will populate this tbody with data -->
    </tbody>
</table>

<script>        // 示例数据，实际应用中可能是从后端API获取
const processedData = [
    ["Key1", "Value1 without 青岛市"],
    ["Key2", "Value2 包含青岛市的信息"]
];

// Function to populate the table with data, showing only the first two rows
function populateTable(data) {
    const tableBody = document.getElementById('data-body');
    tableBody.innerHTML = ''; // Clear existing rows

    // Process and display only the first two lines
    for (let i = 0; i < Math.min(data.length, 2); i++) {
        const row = document.createElement('tr');

        // Create cells for 'Key' and 'Value'
        ['Key', 'Value'].forEach((headerText) => {
            const cell = document.createElement('td');
            cell.textContent = headerText === 'Key' ? data[i][0] : data[i][1];

            // Highlight the row if it's the second row and contains '青岛市'
            if (i === 1 && data[i][1].includes('青岛市')) {
                cell.classList.add('highlight');
            }

            row.appendChild(cell);
        });

        tableBody.appendChild(row);
    }
}

// Call the function to populate the table
populateTable(processedData);
</script>

</body>
</html>